import React from "react";
import {inject, observer} from "mobx-react";
import {withRouter, Route} from "react-router-dom";
import {Bubble, Icon, Modal, Popover, SearchBar, Tools} from "weaver-mobile";
import {toJS} from "mobx";
import {ListViewPage, SearchAdvanced, RouteLayout} from "weaver-mobile-page";
import {openHrmCard} from "../../../util"
import {WrListCard, WrListCardOperate, WrMenu, WrShow} from "../../../public";
import ProgramView from "../programView";

const getLabel = Tools.getLabel;

/**
 * 待审核方案
 * jiansong 2019/11/8
 */
@inject("programAuditStore")
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            show: false, //批量操作
            showType: false,//是否显示左侧类型
            chooseAll: false //是否全选状态
        };
        this.store = this.props.programAuditStore;
    }

    componentDidMount() {
        this.store.doInit();
    }

    render() {
        const {list, search, getTableDatas, searchValueChange, updateFormValue} = this.store;
        const {show, chooseAll, showType} = this.state;
        const {menu, history} = this.props;
        let chooseNum = list.selectedRowKeys.length;
        return (
            <div className="workrelate-performance-programAudit workrelate-listCard-reset">
                <div>
                    <SearchBar
                        value={search.form.formParams["programname"]}
                        placeholder={getLabel(500351, "请输入关键字")}
                        onChange={val => updateFormValue({"programname": val})}
                        onSubmit={getTableDatas}
                        showExtraButton
                        extraButton={this.getExtraButton()}
                        showSelectButton
                        onSelectButtonClick={() => {
                            this.setState({showType: true})
                        }}
                        selectText={(<Popover
                            placement="bottomLeft"
                            onSelect={this.onSelect}
                            visible={showType}
                            mask
                            overlay={
                                <div className="workrelate-header-item">
                                    <Popover.Item key={""}>
                                        <span className="workrelate-header-item-cycle">{getLabel(332, "全部")}</span>
                                    </Popover.Item>
                                    <Popover.Item key={1}>
                                        <span className="workrelate-header-item-cycle">{getLabel(19398, "月度")}</span>
                                    </Popover.Item>
                                    <Popover.Item key={2}>
                                        <span className="workrelate-header-item-cycle">{getLabel(17495, "季度")}</span>
                                    </Popover.Item>
                                    <Popover.Item key={3}>
                                        <span className="workrelate-header-item-cycle">{getLabel(20729, "半年")}</span>
                                    </Popover.Item>
                                    <Popover.Item key={4}>
                                        <span className="workrelate-header-item-cycle">{getLabel(17138, "年度")}</span>
                                    </Popover.Item>
                                </div>
                            }
                        >
                            <span>{this.getSelectLabel()}</span>
                        </Popover>)}
                    />
                    <SearchAdvanced store={search} onSubmit={getTableDatas}/>
                </div>
                <WrShow show={show}>
                    <div className="programAudit-batch-choose">
                        <span onClick={() => {
                            list.selectNone();
                            this.setState({
                                show: false,
                            })
                        }}>{getLabel(31129, "取消")}</span>
                        <span>{getLabel(513668, "已选择{num}条数据").replace("{num}", chooseNum)}</span>
                        <span style={{color: chooseAll && "#55B1F9"}} onClick={() => {
                            if (chooseAll) {
                                list.selectNone();
                            } else {
                                list.selectAll();
                            }
                            this.setState({chooseAll: !chooseAll})
                        }}>{getLabel(556, "全选")}</span>
                    </div>
                </WrShow>
                <ListViewPage.Normal
                    heightSpace={window.getThemeVars ? window.getThemeVars()["hd"] * 49 : 52}
                    store={list}
                    showCheck={show}
                    getTemplate={this.getTemplate}
                    renderSeparator={this.renderSeparator}
                    onRowClick={data => this.handleRowClick(data)}
                />
                <WrShow show={show}>
                    <div className="programAudit-batch-button">
                    <span onClick={() => this.handleBatch("quick_approve")}>
                        <span><Icon type="approval"/></span>
                        <span className="desc">{getLabel(83212, "批量批准")}</span>
                    </span>
                        <span onClick={() => this.handleBatch("quick_return")}>
                        <span><Icon type="end"/></span>
                        <span className="desc">{getLabel(83423, "批量退回")}</span>
                    </span>
                    </div>
                </WrShow>
                <WrShow show={!show}>
                    <WrMenu
                        data={menu}
                        onSelect={val => history.push(val.props.path)}/>
                </WrShow>
                <Route
                    key="programAudit-programView"
                    path="/performance/programAudit/programView"
                    breadcrumbName="待审核方案-考核方案详情"
                    render={() => (
                        <RouteLayout>
                            <div className="wm-route-layout" key="route-program-programView">
                                <ProgramView menu={menu} updateListData={getTableDatas}/>}/>
                            </div>
                        </RouteLayout>
                    )}
                />
            </div>
        )
    }

    getSelectLabel = () => {
        const val = {
            "1": getLabel(19398, "月度"),
            "2": getLabel(17495, "季度"),
            "3": getLabel(20729, "半年"),
            "4": getLabel(17138, "年度")
        }
        var programtype = this.store.search.form.formParams["programtype"];
        return val[String(programtype)] || getLabel(332, "全部")
    }

    //类型选中
    onSelect = (val) => {
        const {getTableDatas, updateFormValue} = this.store;
        updateFormValue({"programtype": val.key});
        getTableDatas();
        this.setState({showType: false})
    }

    //行点击事件
    handleRowClick = (data) => {
        const {list} = this.store;
        const {show} = this.state;
        if (show) { //修改选中框值
            if (list.selectedRowKeys.includes(data.id)) {
                list.selectedRowKeys = list.selectedRowKeys.filter(n => n != data.id)
            } else {
                list.selectedRowKeys.push(data.id + "")
            }
        } else {
            this.props.history.push("/performance/programAudit/programView?programid=" + data.id)
        }
    }

    //获取搜索框额外按钮
    getExtraButton = () => {
        const {search} = this.store;
        return [{
            key: "filter",
            show: (
                <span onClick={() => this.props.history.push(search.path)}>
                    <Icon key="filter-o" type="filter-o"/>
                </span>
            )
        }, {
            key: "operate",
            show: (
                <Popover
                    mask
                    visible={false}
                    onSelect={this.topButtonClick}
                    overlay={[(<div className="workrelate-header-item">
                            <Popover.Item><span
                                className="workrelate-header-item-cycle">{getLabel(500410, "批量操作")}</span></Popover.Item>
                        </div>
                    )]}
                >
                    <Icon key="ellipsis" type="ellipsis"/>
                </Popover>
            )
        }]
    }

    //处理批量操作
    handleBatch = (operate) => {
        const {list: {selectedRowKeys}} = this.store;
        if (selectedRowKeys.length > 0) {
            this.doAudit({
                programids: selectedRowKeys,
                operation: operate
            }, operate == "quick_approve" ? getLabel(513680, "确定批量批准方案吗？") : getLabel(513681, "确定批量退回方案吗？"))
        } else {
            Bubble.warning(getLabel(501159, "请选择要操作的数据"))
        }
    }

    //右上角按钮触发
    topButtonClick = (node, index) => {
        this.setState({show: true})
    }

    //每列数据操作按钮
    renderSeparator = (section, index) => {
        const {list} = this.store;
        const data = toJS(list.data)[index];
        const params = [{
            label: getLabel(142, "批准"),
            iconname: "approval",
            onClick: () => this.doAudit({
                programid: data.id,
                operation: "approve",
            }, getLabel(508727, "确定批准此考核方案") + "?")
        }, {
            label: getLabel('236', '退回'),
            iconname: "end",
            onClick: () => this.doAudit({
                programid: data.id,
                operation: "return",
            }, getLabel(508728, "确定退回此考核方案") + "?")
        }]
        return <WrListCardOperate showOperate={!this.state.show} data={params}/>
    }

    //获取数据模板
    getTemplate = () => {
        return {
            default: [{
                key: "col_1",
                render: data => <WrListCard data={[
                    {label: getLabel(18056, "考核方案"), value: data.programname},
                    {label: getLabel(125757, "方案类型"), value: data.programtypespan},
                    {label: getLabel(33553, "分部"), value: data.subcompanyid1span},
                    {label: getLabel(27511, "部门"), value: data.departmentidspan},
                    {label: getLabel(6086, "岗位"), value: data.jobtitlespan},
                    {
                        label: getLabel(30042, "人员"),
                        value: (<span style={{color: "#4D7AD8"}} onClick={(e) => openHrmCard(data.userid, e)}>
                            {data.useridspan}
                        </span>)
                    },
                    {label: getLabel(19548, "生效日期"), value: data.startdate},
                ]}/>
            }]
        }
    }

    //执行审核方法
    doAudit = (params, message) => {
        Modal.alert(getLabel(386786, "信息确认"), message, [
            {text: getLabel(31129, "取消")},
            {text: getLabel(826, "确定"), onPress: () => this.store.programAuditOperation(params)}
        ])
    }

}

